<!doctype html>
<html lang="es">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <style>
            /* Fondo en degrade */
            .gradient-custom {
                background: linear-gradient(to bottom right, rgb(28, 174, 241), rgb(8, 104, 163))
              }
              .box{
              display: flex !important;
              justify-content: center;
              width: 100%;
              margin-bottom: 30px;
              box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.2);
              padding: 30px 0px;
            }
            .navbar {
                height: 60px;
            }
        </style>

        <title>Reto #2 - El partido de tenis</title>
    </head>
    <body>
        <!-- Navbar -->
        <nav class=" navbar navbar-dark bg-dark" style="display: flex; align-items: center; justify-content: center;">
            <a class="navbar-brand" style="text-align: center; color: aliceblue;">Reto #2 - pachulujambio</a>

            <img src="https://mouredev.com/wp-content/uploads/2018/11/mouredev_72x72.png" width="30" height="30">
        </nav>
        <!-- FONDO FUERA DEL CARD CON ESTILO PARA GENERAR EL DEGRADADO -->
        <div class="mask d-flex align-items-center h-100 gradient-custom">
            <div class="container">
            <!-- CENTRA EL CONTENEDOR -->
            <div class="row justify-content-center">
                <!-- AJUSTO EL TAMAÑO DEL CONTENDOR CENTRAL -->
                <div class="col-lg-14">  
                <!-- CREA UN CARD (rectángulo blanco centrado que hace de fondo al form) -->
                <div class="card">
                    <!-- MARGENES INTERNOS DEL CARD -->
                    <div class="card-body p-4 p-md-5">
                        <!-- IMAGEN -->
                        <div style="display: flex; justify-content: center; align-items: center;">
                            <img class="mb-4" src="https://mouredev.com/wp-content/uploads/2018/11/mouredev_logo.png" width="200" height="72" style="margin-top: -20px;" >
                        </div>
            
                        <!-- Textos y explicación -->
                        <center>
                            <h3>El partido de tenis</h3>
                        </center>
                        <h4 style="margin-top: 30px">Enunciado</h4>
                        <p class="mt-2 text-muted">
                            Escribe un programa que muestre cómo transcurre un juego de tenis y quién lo ha ganado. <br> 
                            El programa recibirá una secuencia formada por "P1" (Player 1) o "P2" (Player 2), según quien
                            gane cada punto del juego. <br> 
                            
                            - Las puntuaciones de un juego son "Love" (cero), 15, 30, 40, "Deuce" (empate), ventaja. <br> 
                            - Ante la secuencia [P1, P1, P2, P2, P1, P2, P1, P1], el programa mostraría lo siguiente: <br> 
                              15 - Love <br> 
                              30 - Love <br> 
                              30 - 15<br> 
                              30 - 30<br> 
                              40 - 30<br> 
                              Deuce<br> 
                              Ventaja P1<br> 
                              Ha ganado el P1<br> 
                            - Si quieres, puedes controlar errores en la entrada de datos.   <br> 
                            - Consulta las reglas del juego si tienes dudas sobre el sistema de puntos.<br> 
                        </p>

                        <!-- Aplicación -->
                        <h5>Creando el juego de tenis</h5>
                        <p>Utiliza los botones para generar el array de puntos.</p>
                        <p>¿Quien hizo el punto? Crear array:</p>
                        <button id="botonP1" name="player1Boton" onclick="actualizarPuntos('P1')" class="btn btn-primary">Jugador 1</button>
                        <button id="botonP2" name="player2Boton" onclick="actualizarPuntos('P2')" class="btn btn-secondary">Jugador 2</button>
                        <input class="form-control" id="arrayPuntos" placeholder="Array de puntos..." type="text" style="margin-top: 30px;" readonly>
                        <div name="divPuntaje" style="margin-top: 20px;">
                            <h5>Puntaje del juego de tenis</h5>
                            <div id='puntajesFront'></div>
                        </div>
                        
                        <!-- Pie de página -->
                        <p class="mt-3 mb-3 text-muted" style="justify-content: center; display: flex;">Web creada por &nbsp;<A HREF="https://github.com/pachulujambio"> Valentín Lujambio </A></p>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        <script>            
            //Crea las variables necesarias 
            let puntosPorJugador = [0, 0];
            let puntosValidos = ["Love", 15, 30, 40];
            let puntajesMarcador = [];

            function actualizarPuntos(value){
                //Suma los puntos de cada jugador según el valor que llega a la función
                value == "P1" ? puntosPorJugador[0]++: puntosPorJugador[1]++; 
                //Va creando el array en el front para el usuario
                arrayPuntos.value += value + ", ";

                //Lo primero que compara es si están empatados
                if (puntosPorJugador[0] == puntosPorJugador[1]) {
                    puntajesMarcador.push("Deuce")
                    //En caso de que algún jugador supere los 40 puntos compara la ventaja o ganador
                }else if (puntosPorJugador[0] > 3 || puntosPorJugador[1] > 3) {
                    if (puntosPorJugador[0] > puntosPorJugador[1]) {
                        //Primero ve si el jugador esta en ventaja
                        if (puntosPorJugador[0] - puntosPorJugador[1] == 1) {
                            puntajesMarcador.push("Ventaja P1")
                        }else { //Caso contrario gana
                            puntajesMarcador.push("Ganador P1")
                            desactivarBotones();
                        }
                    }else{
                        //Repute lógica previa
                        if (puntosPorJugador[1] - puntosPorJugador[0] == 1) {
                            puntajesMarcador.push("Ventaja P2")
                        }else {
                            puntajesMarcador.push("Ganador P2")
                            desactivarBotones();
                        }
                    }
                }else{
                    //Envia los puntajes según corresponda en el array de puntos en base a cada jugador
                    puntajesMarcador.push(puntosValidos[puntosPorJugador[0]] + " - " + puntosValidos[puntosPorJugador[1]]);
                }

                //Retorna los puntajes al front
                var puntajes = puntajesMarcador.map(function(puntaje){
                    return '<p style="margin:0px">'+puntaje+'</p>'
                    })
                document.getElementById("puntajesFront").innerHTML = puntajes;
                
                //Desactiva los botones una vez terminado el juego
                function desactivarBotones() {
                    botonP1.disabled = true; 
                    botonP2.disabled = true; 
                }
            }
        </script>
    </body>
</html>
